<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>合同新的详情页</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--&lt;!&ndash; Font Awesome &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--&lt;!&ndash; Ionicons &ndash;&gt;-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=39cd89cd">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <script src="https://file.ggxqce.com/web/vue.min.js"></script>
    <style>
        .jiaobiao3 {
            position: relative;
        }

        .jiaobiao3 i {
            display: block;
            width: 6px;
            height: 6px;
            background: url("/dist/img/newLog3.png");
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .table-my-box {
            padding: 10px 15px;
        }

        .table-my {
            width: 100%;
            border: none;
        }

        .table-my .title {
            width: 72px;
            text-align: center;
        }

        .table-my .value {
            padding: 5px 0;
        }

        label {
            margin: 0;
            margin-right: 10px;
            font-weight: normal;
        }

        input[type=radio] {
            float: left;
            margin-top: 3px !important;
            margin-right: 2px !important;
            height: 15px;
            border-radius: 0;
        }

        .form-control {
            border-radius: 0;
            box-shadow: none;
            border-color: #d2d6de;
            width: 389px;
        }

        .webuploader-pick {
            background: url(/dist/img/fjT1.png) no-repeat 5px center;
            padding: 0 4px;
            height: 29px;
            line-height: 29px;
            padding-left: 15px;
            margin: 0 auto;
            width: 45px;
            margin-top: 1px;
            border-radius: 4px;
            display: block;
            color: #2a8cec;
        }

        .webuploader-pick-hover {
            color: #fff !important;
            background: url(/dist/img/fjT2.png) no-repeat 5px center;
            background-color: #0F6099;

        }

        .td-tanZongStyle-line input {
            box-shadow: inset 1px 1px 4px #333;
            padding-left: 4px;
            height: 34px;
            line-height: 34px;
            width: 389px;
            color: #2a8cec;
            border: 1px solid rgb(238, 238, 238);

        }

        .td-tanZongStyle-line {
            height: 45px;
        }

        .td-tanZongStyle-line textarea {
            box-shadow: inset 1px 1px 4px #333;
            display: block;
        }

        .td-tanZongStyle-line span {
            padding-left: 4px !important;
        }

        .table-detail td.td-tanZongStyle-line {
            height: 100% !important;
            padding: 1px !important;

        }

        .td-tanZongStyle-line select {
            box-shadow: inset 1px 1px 4px #333;
            padding-left: 4px;
            height: 34px;
            line-height: 34px;
            width: 389px;
            color: #2a8cec;
            box-shadow: inset 1px 1px 4px #333;
            padding-left: 4px !important;
            border: 1px solid rgb(238, 238, 238);
        }

        .td-box {
            float: left;
            margin-left: 20px;
            border: 1px solid #cbcbcb;
        }

        table td.td-tanZongStyle-line .wyui-autocomplete-panel {
             display: none;

        }

    </style>
</head>
<body>
<iframe id="ifAttach" style="display:none"></iframe>
<!-- Content Header (Page header) -->
<section class="content" id="app">
    <div class="table-my-box">
        <table cellspacing="0" class="table-my">
            <tbody>

            <tr>
                <td class="title" style="height: auto;">款项用途</td>
                <td class="td-tanZongStyle-line">
                    <div class="td-box">
                        <select v-model="moneyUser">
                            <option value=""></option>
                            <option value="正常还款">正常还款</option>
                            <option value="客户自还">客户自还</option>
                            <option value="其他收入">其他收入</option>
                        </select>
                    </div>

                </td>
            </tr>

            <tr>
                <td class="title" style="height: auto;">还款日期</td>
                <td class="td-tanZongStyle-line">
                    <div class="td-box">
                        <input type="text"
                               v-model="repayDate" placeholder="选择日期"
                               @focus="showDatePicker($event)"
                        />
                    </div>
                </td>

            </tr>

            <tr>
                <td class="title" style="height: auto;">金&nbsp额&nbsp(元)</td>
                <td class="td-tanZongStyle-line">
                    <div class="td-box">
                        <input type="text" id="regionManagerName"
                               v-on:input="keyDownMoney($event.target)"
                               @blur="strFormat($event.target,'money')"
                               @focus="strFormatF($event.target,'money')"
                               @click.once="strFormat($event.target,'money'),strFormatF($event.target,'money')"             v-onedate="fmoney(money)"/>
                    </div>
                </td>
            </tr>


            <tr>
                <td class="title" style="height: auto;">备&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp注</td>
                <td class="td-tanZongStyle-line">
                    <div class="td-box">
                        <input type="text"
                               v-model="remark"/>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="title" style="height: auto;">还款凭证</td>
                <td class="value">
                    <div class="td-box">
                        <div class="fj-tanzhongStyle fj-one-tanzhongStyle" v-if="repaymentAttachName"
                             style="width: 389px">
                            <b :class="fjStyle(repaymentAttachName)"></b>
                            <div class="name" :title="repaymentAttachName"
                                 v-on:click="download(repaymentAttachUrl,repaymentAttachName)">
                                {{repaymentAttachName}}
                            </div>
                            <div class="down"><a href="javascript:void(0)" class="nui-txt-link"
                                                 v-on:click="download(repaymentAttachUrl,repaymentAttachName)">下载</a>
                            </div>

                            <div class="del" v-if="repaymentAttachName"><a
                                    href="javascript:void(0)" class="nui-txt-link"
                                    v-on:click="deleteFileRP()">删除</a></div>
                        </div>
                        <div class="fujian fj"
                             style="width: 389px;border: 1px solid #d2d6de;background-color: white;height: 34px"
                             id="divUpload">上传
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="title" style="height: auto;">催&nbsp&nbsp收&nbsp&nbsp人</td>
                <td class="td-tanZongStyle-line">
                    <div class="td-box">
                        <input type="text" id="txtCoster"
                               v-model="collectorName"/>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="form-group text-center" style="width: 493px">
            <input type="button" id="btnDraft" value="确定" class="btn oaBtn btn-sm" style="margin-top: 15px;"
                   @click="canUseMoneychange()">
        </div>
    </div>
</section>

<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>

<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=7e54a132"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=558d0414"></script>
<!--<script src="Template.js?t=42e28def"></script>-->
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script src="/dist/js/oa.js?t=63aed32f"></script>
<script src="/page/apply/contract/Template.js?t=42e28def"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script>
    // 注册一个局自定义指令 `v-inputOnce`
    Vue.directive('onedate', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // if($(el).hasClass("otherInput")){
            el.click()
            // }else{
            //     el.focus()
            //     el.blur()
            // }
            //聚焦元素

        },
        componentUpdated: function (el, binding) {
            // 聚焦元素


        }
    })
    Vue.directive('jz-fj', {
        inserted: function (el, binding) {
            console.log(el);
            app.repaymentAttachName = "";
            app.repaymentAttachUrl = "";
            app.init();

        }
    });

</script>
<script>

    $(function () {
        $("body").on("click", ".selectModel", ".divMore", function (e) {
            if ($(".model-picker-dropdown").is(":hidden")) {
                $(".model-picker-dropdown").css({
                    "width": $(this).outerWidth() + "px",
                    "left": $(this).offset().left,
                    "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            } else {
                $(".model-picker-dropdown").hide();
            }
        });
        $("body").on("click", ".model-select-tab a", function (e) {
            $(this).parent().find("a").removeClass("active");
            $(this).addClass("active");
            var boxName = $(this).attr("data-count");
            $(".model-select").hide();
            $(".model-select-content" + " ." + boxName).show();
        });
        $("body").on("click", ".model-select  a", function (e) {
            if ($(this).hasClass("active")) {
                return false;
            }
            $(this).parent().find("a").removeClass("active");
            var id = $(this).attr("attr-id");
            $(this).addClass("active");
            var val = $(this).text();
            if ($(this).parents(".model-select").hasClass("type")) {
                $(".model-select-tab a").removeClass("active");
                $(".model-select-tab a[data-count=brand]").addClass("active");
                $(".model-select").hide();
                app.contract.main.province = val;
                app.contract.main.city = '';
                app.getCity(id);
                $(".model-select-content .brand").show();
            } else if ($(this).parents(".model-select").hasClass("brand")) {
                app.contract.main.city = val;
                $(".model-picker-dropdown").hide();
            }
        })
        $("body").on("click", ".model-picker-dropdown", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".model-picker-dropdown").hide();
        });
    });
</script>
<script>
    var api = frameElement.api;

    var app = new Vue({
        el: '#app',
        data: {
            moneyUser: '',
            remark: '',
            money: 0.00,
            repayDate: '',
            canUseMoney: $.wyui.page.urlParams.canUseMoney? $.wyui.page.urlParams.canUseMoney : 0.00,
            repaymentAttachUrl: '',
            repaymentAttachName: '',
            buyType: $.wyui.page.urlParams.buyType,
            pageType: $.wyui.page.urlParams.pageType ? $.wyui.page.urlParams.pageType : 'add',//页面类型
            brandName: "利勃海尔",
            zhihuan: '',
            diankuan: '',
            id: $.wyui.page.urlParams.id ? $.wyui.page.urlParams.id : '',
            companyList: [],
            companyId: '',
            contractType: '',
            collectorName:"",
            collectorId:"",
            regionManagerName: '',
            regionManagerId: '',
            daiShouDaiFu: '',
            user: {
                cardAttachName: '',
                cardAttachUrl: ''
            }
        },
        methods: {
            // initFj:function(){
            //     var that = this;
            //     that.init();
            //     that.hide();
            // },
            fjStyle: function (fjName) {
                if (fjName) {
                    var type = fjName.substring(fjName.lastIndexOf('.') + 1);
                    return 'img fj-' + type
                }
                return 'img'
            },
            deleteFileRP: function () {
                if (window.confirm("确定要删除该附件吗?")) {
                    this.repaymentAttachName = "";
                    this.repaymentAttachUrl = "";
                    $("#divUpload").show();
                }
            },
            remarks: function (item) {
                this.clickItem = item;
                var html = ""
                html = '<textarea style="width:95%;margin: 0 auto;outline: none;resize: none;" rows="10" cols="30" id="printText" class="printInput"></textarea><input class="btn oaBtn btn-sm printBtn" type="button" value="确认" style="margin-left: 35%;" onclick="app.pok()">';
                $.dialog({
                    content: html,
                    title: '请填写备注信息',
                    width: 350,
                    max: false,
                    min: false,
                    lock: true
                });
                $("#printText").text(item.remark);
            },
            deleteFile: function (item) {
                if (window.confirm("确定要删除该附件吗?")) {
                    console.log(item)
                    this.user[item + "Name"] = "";
                    this.user[item + "Url"] = "";
                    $("#" + item).show();
                }
            },
            download: function (attachId, fileName) {
                downloadFile(attachId,fileName)
                return false;
            },
            canUseMoneychange: function () {
                var that = this;
                var mon;
                if (that.moneyUser == "正常还款"&&that.buyType!='全款') {
                    mon=Number(that.getoff_Qfw(that.money))+Number(that.canUseMoney)
                }else{
                    mon=+Number(that.canUseMoney)
                }
                var data = {
                    mainId: that.id,
                    availableDate: that.repayDate,
                    availableMoney: that.getoff_Qfw(that.money),
                    availableType: that.moneyUser,
                    canUseMoney:mon,
                    remark: that.remark,
                    createUserId: getCurrentUser().id,
                    createUserName: getCurrentUser().name,
                    repaymentAttachUrl: that.repaymentAttachUrl,
                    repaymentAttachName: that.repaymentAttachName,
                    collectorName:that.collectorName,
                    collectorId:that.collectorId
                }
                console.log(data)
                $.wyui.postMethod("/receivable/saveAvailable.json", trimRN(data), function (data) {
                    console.log(that.buyType)
                    if (data) {
                        if (that.moneyUser == "正常还款"&&that.buyType!='全款') {
                            alert("录入成功")
                            top.closeTabByPageId('accountReceivable' + that.id);
                            setTimeout(function () {
                                top.addTabs({
                                    id: 'accountReceivable' + that.id,
                                    title: '应收台账详情页',
                                    close: true,
                                    noblockUI: true,
                                    url: 'apply/accountReceivable/detail.html?id=' + that.id + '&buyType=' + that.buyType + '&pageType=edit' + '&repayDate=' + that.repayDate+"&scorll=true&&editUser=1",
                                });
                                api.close();
                            }, 200)

                        } else {
                            alert("录入成功")
                            top.refreshTabById('accountReceivable' + that.id);
                            // top.closeTabByPageId("yscd");
                            api.close();
                        }
                    } else {
                        alert("保存失败")
                    }
                });
            },
            getNowDate: function () {
                var now = new Date();
                var year = now.getFullYear();
                var month = (now.getMonth() + 1).toString();
                var day = (now.getDate()).toString();
                var hour = (now.getHours()).toString();
                var minute = (now.getMinutes()).toString();
                var second = (now.getSeconds()).toString();
                if (month.length == 1) {
                    month = "0" + month;
                }
                if (day.length == 1) {
                    day = "0" + day;
                }
                if (hour.length == 1) {
                    hour = "0" + hour;
                }
                if (minute.length == 1) {
                    minute = "0" + minute;
                }
                if (second.length == 1) {
                    second = "0" + second;
                }
                var dateTime = year + "-" + month + "-" + day;
                return dateTime;
            },
            init: function () {
                var that = this;
                setTimeout(function () {
                    var uploader = WebUploader.create({
                        // 选完文件后，是否自动上传。
                        auto: true,
                        // swf文件路径
                        swf: "/statics/plugin/webuploader-0.1.5/Uploader.swf",
                        // 文件接收服务端。
                        server: server.fjIp + "/attach/uploadFile.json",
                        // 选择文件的按钮。可选。
                        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                        pick: '#divUpload',
                        duplicate: true,
                    });
                    // 文件上传过程中创建进度条实时显示。
                    uploader.on('uploadProgress', function (file, percentage) {
                        var $li = $('#' + file.id),
                            $percent = $li.find('.progress span');
                        // 避免重复创建
                        if (!$percent.length) {
                            $percent = $('<p class="progress"><span></span></p>')
                                .appendTo($li)
                                .find('span');
                        }
                        $percent.css('width', percentage * 100 + '%');
                    });
                    uploader.on("uploadStart", function () {
                        $("#progress").show();
                    });
                    uploader.on("uploadComplete", function () {
                        $("#progress").hide();
                    });
                    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                    uploader.on('uploadSuccess', function (file, response) {
                        that.repaymentAttachName = response.name;
                        that.repaymentAttachUrl = response.url;
                        $("#divUpload").hide();
                    });
                    // 文件上传失败，显示上传出错。
                    uploader.on('uploadError', function (file) {
                        alert("导入失败！");
                    });
                }, 10);

            },
            hide: function () {
                var that = this;
                setTimeout(function () {
                    if (that.repaymentAttachName) {
                        $("#divUpload").hide();
                    }
                })
            },
            showDatePicker: function (e) {
                var that = this;
                WdatePicker({
                    onpicked: function (dp) {
                        that.repayDate = dp.cal.getNewDateStr();
                        return true;
                    }
                });
                $(e.target).blur();
            },
            inputFocus: function (id) {
                $("#" + id).focus();
            },
            fmoney: function (s, n) {
                n = n > 0 && n <= 20 ? n : 2;
                s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
                var l = s.split(".")[0].split("").reverse(), r = s.split(".")[1],
                    t = "";
                for (i = 0; i < l.length; i++) {
                    t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
                }
                return t.split("").reverse().join("") + "." + r;
            },
            strFormat: function (target, data) {
                //此结果为了展示数据
                var value = (target.value).trim();
                value = value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g, '');
                if (!value) {
                    value = 0
                }
                ;
                //此结果为data存入数据
                var dataList = data.split('.');

                if (dataList.length > 0) {
                    if (dataList.length == 1) {
                        this[dataList[0]] = value;
                    }
                    if (dataList.length == 2) {
                        this[dataList[0]][dataList[1]] = value;
                    }
                    if (dataList.length == 3) {
                        this[dataList[0]][dataList[1]][dataList[2]] = value;
                    }
                    if (dataList.length == 4) {
                        this[dataList[0]][dataList[1]][dataList[2]][dataList[3]] = value;
                    }
                    if (dataList.length == 5) {
                        this[dataList[0]][dataList[1]][dataList[2]][dataList[3]][dataList[4]] = value;
                    }
                }
                target.value = this.fmoney(value);
            },
            strFormatF: function (target, data) {
                var value = '';
                var dataList = data.split('.');

                if (dataList.length > 0) {
                    if (dataList.length == 1) {
                        value = this[dataList[0]]
                    }
                    if (dataList.length == 2) {
                        value = this[dataList[0]][dataList[1]]
                    }
                    if (dataList.length == 3) {
                        value = this[dataList[0]][dataList[1]][dataList[2]]
                    }
                    if (dataList.length == 4) {
                        value = this[dataList[0]][dataList[1]][dataList[2]][dataList[3]]
                    }
                    if (dataList.length == 5) {
                        value = this[dataList[0]][dataList[1]][dataList[2]][dataList[3]][dataList[4]]
                    }
                }
                if (!value || value == '0.00') {
                    console.log('获取焦点', value)
                    value = '';
                }
                target.value = value;
            },
            keyDownMoney:function (AmtStr) {
                     var amtReg = /^([1-9][\d]*|0)(\.[\d]{0,2})?$/;
                    var orgStr = AmtStr.value;
                 var amtStr = orgStr.replace(/,/g, "");
                 if (!amtReg.test(amtStr)) {
                         if (amtStr == "") {
                             $("#" + hiddenId).val("");
                             obj.val("");
                             return;
                         }
                         amtStr = $("#" + hiddenId).val();


                 }
                 var dox = "";//小数位
                 if (amtStr.indexOf(".") != -1) {
                     dox = amtStr.substring(amtStr.indexOf("."));
                     amtStr = amtStr.substring(0, amtStr.indexOf("."));
                 }


                 amtStr = this.add_Qfw(amtStr);
                 console.log(amtStr + dox)
                AmtStr.value=amtStr + dox;
            },
            getoff_Qfw:function(cash) {
                 var newCash = cash.replace(/,/g, "");
                 return newCash;
             },
            add_Qfw:function(cash) {
                 var len = cash.length;
                 var cashNew = "";//加上","的字符串
                 var tt = 0;//计数器，每加一个"," tt 加 1
                 var t = 0;//添加","的个数

                 //获取金额整数部分长度
                 var amtStrNoQfw = this.getoff_Qfw(cash);//去掉当前金额格式化千分位
                 var dot = amtStrNoQfw.indexOf(".");
                 if (dot < 0) {
                     dot = amtStrNoQfw.length;
                 }
                 intLen = (amtStrNoQfw.substring(0, dot)).length;

                 if (intLen > 3) {
                     t = (intLen - intLen % 3) / 3;
                 }
                 else
                     return cash;

                 //个数部分长度不是3的倍数
                 if (intLen % 3 != 0) {
                     for (var ii = 0; ii < len; ii++) {
                         cashNew = cashNew + cash.charAt(ii);
                         if (ii == (intLen % 3 + 3 * tt - 1) && tt < t) {
                             tt = tt + 1;
                             cashNew = cashNew + ",";
                         }
                     }
                 }
                 //个数部分长度是3的倍数
                 else {
                     tt = tt + 1;
                     for (var ii = 0; ii < len; ii++) {
                         cashNew = cashNew + cash.charAt(ii);
                         if (ii == (3 * tt - 1) && tt < t) {
                             tt = tt + 1;
                             cashNew = cashNew + ",";
                         }
                     }

                 }
                 return cashNew;
             },
            toggleMoney:function(AmtStr){
                 var inputStr = AmtStr
                 if (inputStr == "" || inputStr==null) return "";
                 inputStr = inputStr.replace(/,/g, "");
                 var w = inputStr.indexOf("-")
                 if (w == 0) {
                     inputStr = inputStr.substring(1, inputStr.length)
                 }
                 var i = inputStr.indexOf(".")
                 var StrPo = ""
                 var blea = false
                 if ((inputStr.length - i - 1) != 0 && i != -1) {
                     StrPo = inputStr.substring(i, inputStr.length)
                     if (StrPo.length == 2) {
                         StrPo = StrPo + "0"
                     }
                     blea = true
                 }
                 else if ((inputStr.length -1) == i) {
                     StrPo = "00"
                 }

                 else {
                     StrPo = ".00"
                 }
                 var StrInt = inputStr
                 if (blea) {
                     StrInt = inputStr.substring(0, i)
                 }
                 var h = StrInt.length
                 var m = h % 3
                 var StrZh = ""
                 var po = true
                 if (m != 0 && h > 3) {
                     StrZh = StrInt.substring(0, m) + ","
                     StrInt = StrInt.substring(m, h)
                 } else if (h < 4) {
                     if (h == 0) {
                         StrInt = h
                     }
                     StrZh = StrInt + StrPo
                     po = false
                 }
                 var k = (h - m) / 3
                 if (po) {
                     for (var n = 1 ; n < k + 1 ; n++) {
                         StrZh = StrZh + StrInt.substring(0, 3)
                         if (n != k) {
                             StrZh = StrZh + ","
                         } else {
                             StrZh = StrZh + StrPo
                         }
                         StrInt = StrInt.substring(3, (h - m))
                     }
                 }
                 if (w == 0) {
                     StrZh = "-" + StrZh
                 }
                 console.log(StrZh)
//                 return StrZh;
             }

        }
        ,
        mounted: function () {
            var that = this;
            that.repayDate = that.getNowDate();
            that.init();
        }
    });
</script>
<script>
    $(function () {
        $("#txtCoster").autoComplete({
            url: server.ip + urlConfig.system.user.getCosterTop10ByNameUserRight,
            render: function (users, panel) {
                console.log("users=" + users);
                if (users) {
                    for (var i = 0; i < users.length; i++) {
                        $("<li></li>").data("autoComplete",
                            users[i]).html("<a>" + users[i].name + "&nbsp;&nbsp;&nbsp;" +
                            "(" + "&nbsp;" + users[i].companyName + "-" + users[i].departName + "-" + users[i].roleName + "&nbsp;" + ") " + "</a>")
                            .appendTo(panel);
                    }
                }
            },
            selected: function (user) {
                console.log(user);
                app.collectorId = user.id;
                app.collectorName = user.name;
            },
            extraParams: {userId: getCurrentUser().id},
            height: 210,
            width: 300
        });
    })
</script>
</body>
</html>
